<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">

			<div id="once">
				<!-- 视图上vue指定的插入方式的数据变量必须声明在实例上 -->
				<h1 v-once>{{title}}</h1>
				<button type="button" @click="change">dsfa</button>
			</div>
			<div class="v-html">
				<!-- 插值不会解析HTML，因为插值是JS表达式，没有对Dom的操作。
				v-html的出现解决了模板没有办法解析html的问题
				不要试图用v-html做子模板,vue本身有一个底层的模板编译系统
				 而不是直接使用字符串来渲染
				 子模板放到子组件中，让模板的重用和组合更强大
				 不要吧用户提供的内容作为v-html的插值，这种插值容易导致xss攻击
				 
				 v-html动态渲染HTML，使用基本都是innerHtml
				 innerHtml有时候回容易导致xss攻击
				 -->
				<div id="">
					{{title}}
				</div>
			</div>
			<div class="v-bind">
				<!-- title会被解析为一个变量，而不是字符串。 -->
				< <h1>{{title}}</h1>
					<div id="">
						<img :src="imgUrl">
					</div>
					<p :title="content">
						{{content}}
					</p>
					<p>
						<!-- disabled='true'
					对于模板解析，true是个字符串，并不是逻辑真
					:disabled='true' 逻辑真 -->
						<textarea :disabled="!isLogin" placeholder="请填写评论">
					</textarea>
					</p>
			</div>
			<div class="model">
				<!-- 插值是一个js表达式 一个插值只能绑定一个表达式-->
				<h1> {{a+1}}</h1>
				<h1> {{'a+1=' + (a+1)}}</h1>
				<h1> {{a && b}}</h1> -->
				<!-- shiyong jsapi -->
				<h4>{{subTitle.split(' ').reverse().join('-')}}</h4>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					title: 'lili',
					imgUrl: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00687-1667.jpg',
					content: 'neirong',
					isLogin: true,
					a: 1,
					b: 2,
					subTitle: 'asdfa ssdas'
				},
				methods: {
					submit: function() {
						console.log(this.message);
					},
					change: function() {
						this.title = 'wulei'
					}
				}
			})
		</script>
	</body>
</html>
